/**
 *@auther: tang
 @Date: 2020-11-13
 *Project: group-booking-shop-manage-system
 */
import React from "react"
import { Checkbox} from 'antd';
import "./givePer.css"
import { Observer,inject} from "mobx-react"
const CheckboxGroup = Checkbox.Group;
@inject("permissStore")
@Observer
class GivePermiss extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checkAll:false,
            checkAllIndeterminate:true,
            testChBoxs:[
                {
                    plainOptions: ['商品管理', '分类管理', '商品标签管理',"评论管理"],
                    defaultCheckedList :['商品管理', '分类管理'],
                    checkedList:['商品管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"商品"
                },
                {
                    plainOptions: ['优惠券管理', '限时秒杀管理', '幸运抽奖管理','助力活动管理'],
                    defaultCheckedList :['优惠券管理', '限时秒杀管理'],
                    checkedList:['优惠券管理', '限时秒杀管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"促销"
                },
                {
                    plainOptions: ['订单管理', '团购管理', '发货单管理','退货单管理','批量发货管理'],
                    defaultCheckedList :['订单管理', '团购管理'],
                    checkedList:['订单管理', '团购管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"订单"
                },
                {
                    plainOptions: ['广告管理'],
                    defaultCheckedList :['广告管理'],
                    checkedList:['广告管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"广告"
                },
                {
                    plainOptions: ['会员管理', '会员等级管理', '签到管理'],
                    defaultCheckedList :['会员管理', '会员等级管理'],
                    checkedList:['会员管理', '会员等级管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"会员"
                },{
                    plainOptions: ['管理员管理', '管理员日志', '角色管理'],
                    defaultCheckedList :['管理员管理', '管理员日志'],
                    checkedList:['管理员管理', '管理员日志'],
                    indeterminate:true,
                    checkAll:false,
                    title:"设置"
                },{
                    plainOptions: ['商店设置', '菜单管理', '支付方式管理','配送方式管理', '配送区域管理', '门店管理'],
                    defaultCheckedList :['商店设置', '菜单管理', '支付方式管理','配送方式管理'],
                    checkedList:['商店设置', '菜单管理', '支付方式管理','配送方式管理'],
                    indeterminate:true,
                    checkAll:false,
                    title:"微信"

                }
            ]
        }
    }
    onChange = (index,list) => {
        let boxs = this.state.testChBoxs
        this.setState({
            testChBox:boxs.map((item,inx)=>{
                if (inx===index){
                    item["checkedList"] = list;
                    item["indeterminate"] = !!list.length && list.length < item.plainOptions.length;
                    item["checkAll"] = list.length === item.plainOptions.length;
                }
                return item
            })
        });
        this.props.permissStore.permissCheckData = [...this.state.testChBoxs.filter(item=>{
            return {checkedList:item.checkedList,title:item.title}
        })]
        //执行判断是否所有的都是空
        let empLen = boxs.filter(item=>{
            return item.checkAll===true;
        })
        this.setState({
            checkAllIndeterminate:!!empLen.length && empLen.length<boxs.length
        })
    };
    componentDidMount() {
        this.props.permissStore.permissCheckData = [...this.state.testChBoxs.filter(item=>{
            return {checkedList:item.checkedList,title:item.title}
        })]
    }

    onCheckAllChange = (index,e) => {
        console.log(e.target.checked)
        let boxs = this.state.testChBoxs
        this.setState({
            testChBox:boxs.map((item,inx)=>{
                if (inx===index){
                    item["checkedList"] = e.target.checked ? item.plainOptions : [];
                    item["indeterminate"] = false;
                    item["checkAll"] = e.target.checked
                }
                return item
            })
        })
        this.props.permissStore.permissCheckData = [...(this.state.testChBoxs.filter(item=>{
            return {checkedList:item.checkedList,title:item.title}
        }))]
        //执行判断是否所有的都是空
        let empLen = boxs.filter(item=>{
            return item.checkAll===true;
        })
        this.setState({
            checkAllIndeterminate:!!empLen.length && empLen.length<boxs.length
        })
    };
    onCheckAllMoudle(e){
        console.log(e.target.checked);
        let boxs = this.state.testChBoxs

        this.setState({
            testChBox:boxs.map((item,inx)=>{
                    item["checkedList"] = e.target.checked ? item.plainOptions : [];
                    item["indeterminate"] = false;
                    item["checkAll"] = e.target.checked
                return item
            }),
            checkAll:e.target.checked,
            checkAllIndeterminate:false
        })



    }
    render() {
        return (
            <div>
                { this.state.testChBoxs.map((item,index)=>{
                    return (<div key={index} className="perItem" style={{padding:"20px"}}>
                        <Checkbox indeterminate={item.indeterminate} onChange={this.onCheckAllChange.bind(this,index)} checked={item.checkAll}>
                            {item.title}
                        </Checkbox>
                        <CheckboxGroup options={item.plainOptions} value={item.checkedList} onChange={this.onChange.bind(this,index)} />
                    </div>)
                })}
                <Checkbox indeterminate={this.state.checkAllIndeterminate} onChange={this.onCheckAllMoudle.bind(this)} checked={this.state.checkAll}>
                   全选
                </Checkbox>
            </div>
        )
    }
}

export {GivePermiss as default}
